<template>
    <ul class="bgf pay">
        <li v-for="(val,key) in list" :key="key">
            <div class="flex flexa">
                <img :src="val.icon" alt="" srcset="" >
                <div class="padl20">
                    <h4 class="font14 col1e padb5">{{val.title}} </h4>
                    <p class="col9 ">{{val.dec}} </p>
                </div>
            </div>
            <el-switch v-model="val.select" size="large"/>
        </li>
    </ul>
</template>
<script>
export default {
    data(){
        return{
            list:{
                WeChat: { icon: this.utils.loadImg('li.png'), title: '微信支付', select: false, dec: '资金结算至店铺余额，仅支持境内使用，支付宝无法使用微信支付' },
                Alipay: { icon: this.utils.loadImg('li.png'), title: '支付宝支付', select: false, dec: '资金结算至店铺余额，仅支持境内使用，微信内无法使用支付宝支付' },
                balance: { icon: this.utils.loadImg('li.png'), title: '余额支付', select: false, dec: '使用余额支付' },
                bankCard: { icon: this.utils.loadImg('li.png'), title: '银行卡支付', select: false, dec: '支付使用需绑定储蓄卡和信用卡，资金结算至店铺余额，仅支持境内使用' },
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.padb5{ padding-bottom: 5px;}
.pay{
    padding: 30px 20px;
}
li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
    padding: 0 25px;
    background: #F5F6FA;
    img{
        width: 32px;
        height: 32px;
    }
    margin-bottom: 10px;
}
</style>